<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>H+ 后台主题UI框架 - 基础表格</title>
		<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
		<meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
		<link rel="shortcut icon" href="favicon.ico">

		<link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
		<link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">

		<link href="css/animate.min.css" rel="stylesheet">
		<link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">

		<link href="../static/css/custom.css" rel="stylesheet">


		<link href="css/plugins/datapicker/datepicker3.css" rel="stylesheet">
		<link href="css/plugins/iCheck/custom.css" rel="stylesheet">


		<!--  switchery-->
		<link href="css/plugins/switchery/switchery.css" rel="stylesheet">
		<!--  /switchery-->

	</head>

	<body class="gray-bg">
		<div class="wrapper wrapper-content animated fadeInRight">
			<div class="row">
				<div class="col-sm-12">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>自定义响应式表格</h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="dropdown-toggle" data-toggle="dropdown" href="table_basic.html#">
									<i class="fa fa-wrench"></i>
								</a>
								<ul class="dropdown-menu dropdown-user">
									<li>
										<a href="table_basic.html#">选项1</a>
									</li>
									<li>
										<a href="table_basic.html#">选项2</a>
									</li>
								</ul>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>

						<div class="ibox-content">


							<div class="row">
								<div class="col-sm-4 m-b-xs">
									<button type="button" class="btn btn-success" onclick="location.reload()"> 刷新页面</button>
									<a target="_blank" href="#" class="btn btn-success "> 在新窗口中打开</a>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-12 m-b-xs">
									<button type="button" class="btn btn-success  search-dom-btn-1"> 筛选</button>
									<button type="button" class="btn btn-info  se-all"> 全选</button>
									<button type="button" class="btn btn-info  se-rev"> 反选</button>
									<button type="button" class="btn btn-danger  btn-add"> 添加数据</button>
									<button type="button" class="btn btn-danger  multi-op multi-op-del"> 批量删除</button>
									<button type="button" class="btn btn-primary  multi-op multi-op-toggle-status-enable"> 批量启用</button>
									<button type="button" class="btn btn-warning  multi-op multi-op-toggle-status-disable"> 批量禁用</button>
								</div>
							</div>

							<div class="table-responsive">

								<ul class="pagination">
									<li class="disabled">
										<span>«</span>
									</li>
									<li class="active">
										<span>1</span>
									</li>
									<li>
										<a href="#">2</a>
									</li>
									<li>
										<a href="#">»</a>
									</li>
								</ul>


								<span class="tips"> * 所有红色标题的字段或者背景颜色为黄色的字段可以双击修改</span>
								<table class="table table-striped  table-bordered table-hover table-condensed ">
									<thead>
										<tr>
											<th></th>
											<th class="red">项目</th>
											<th class="red">进度</th>
											<th>任务</th>
											<th>日期</th>
											<th>操作</th>
											<th>操作</th>
											<th>是否启用</th>
										</tr>
									</thead>
									<tbody>


										<tr data-id="1">
											<td>
												<input type="checkbox" class="i-checks ids">
											</td>
											<td>
												<span class="name">hello:</span>
												<span class="td-modify name" data-field="name" data-reg="/^\d{1,4}$/" data-msg="请填写合法手机号码"></span>
											</td>
											<td>
												<select data-field="vas" data-change-callback="registUpdate"  data-success-callback="refresh_page"  class=" form-control  inline td-select">
													<option value="0">请选择</option>
													<option value="1">选项1</option>
													<option value="2">选项2</option>
													<option value="3">选项3</option>
												</select>
											</td>
											<td>20%</td>
											<td>2014.11.11</td>
											<td>
												<button type="button" class="btn btn-info btn-xs btn-detail">详细</button>
												<button type="button" class="btn btn-success btn-xs btn-edit">编辑</button>
												<button type="button" class="btn btn-danger btn-xs btn-delete">删除</button>
											</td>
											<td>
												<span class="pie">是否启用</span>
												<input type="checkbox" class="js-switch" name="switch2[]" data-change-callback="switcherUpdateField" data-success-callback="refresh_page" />
											</td>
											<td>
												<input type="checkbox" class="js-switch" name="switch2[]" data-change-callback="switcherUpdateField" data-success-callback="refresh_page" />
											</td>
										</tr>


										<tr data-id="2">
											<td>
												<input type="checkbox" class="i-checks ids">
											</td>
											<td>
												<span class="td-modify name" data-field="name">米莫说｜MiMO Show</span>
											</td>
											<td>
													<textarea class="td-modify"   data-field="name" style="width: 100%;">支持路由到模块的控制器/操作、控制器类的方法、闭包函数和重定向地址，甚至是任何类库的方法；规则路由支持全局和局部变量规则定义（正则）；</textarea>
											</td>
											<td>20%</td>
											<td>2014.11.11</td>
											<td>
												<button type="button" class="btn btn-info btn-xs btn-detail">详细</button>
												<button type="button" class="btn btn-success btn-xs btn-edit">编辑</button>
												<button type="button" class="btn btn-danger btn-xs btn-delete">删除</button>
											</td>
											<td>
												<span class="pie">是否启用</span>
												<input type="checkbox" checked class="js-switch-notauto" name="switch2[]" data-change-callback="switcherUpdateFieldConfirm" data-success-callback="refresh_page" />
											</td>
											<td>
												<input type="checkbox" class="js-switch-notauto" name="switch2[]" data-change-callback="switcherUpdateFieldConfirm" data-success-callback="refresh_page" />
											</td>
										</tr>


									</tbody>
								</table>


								<ul class="pagination">
									<li class="disabled">
										<span>«</span>
									</li>
									<li class="active">
										<span>1</span>
									</li>
									<li>
										<a href="#">2</a>
									</li>
									<li>
										<a href="#">»</a>
									</li>
								</ul>


							</div>

						</div>
					</div>
				</div>
			</div>
		</div>


		<div class="search-dom-1" style="display: none;padding: 5px;">
			<form id="form1" action="">
				<div class="col-sm-12 m-b-xs">
					<button type="submit" class="btn  btn-primary">搜索</button>
				</div>

				<div class="col-sm-5 m-b-xs">
					<div class="input-group">
						<span class="input-group-btn">
								<span class="btn"> 名字</span>
						</span>

						<select class=" form-control  inline change_serach">
							<option value="0">请选择</option>
							<option value="1">选项1</option>
							<option value="2">选项2</option>
							<option value="3">选项3</option>
						</select>
					</div>

				</div>

				<div class="col-sm-4">
					<div class="input-group">
						<span class="input-group-btn">
								<span class="btn"> 名字</span>
						</span>
						<input id="aaa" type="text" placeholder="请输入关键词" class=" form-control">
						<!--
							<span class="input-group-btn">
									<button type="button" class="btn  btn-primary"> 搜索</button>
							</span>
						-->
					</div>
				</div>

				<div class="col-sm-3 m-b-xs">
					<div data-toggle="buttons" class="btn-group">
						<label class="btn  btn-white"> <input type="radio" id="option1" name="options">天</label>
						<label class="btn  btn-white active"> <input type="radio" id="option2" name="options">周</label>
						<label class="btn  btn-white"> <input type="radio" id="option3" name="options">月</label>
					</div>
				</div>

				<div class="col-sm-12 m-b-xs">
					<div data-toggle="buttons" class="btn-group">
						<label class="btn  btn-white"> <input type="checkbox" name="options">天</label>
						<label class="btn  btn-white active"> <input type="checkbox" name="options">周</label>
						<label class="btn  btn-white"> <input type="checkbox" name="options">月</label>
					</div>
				</div>

				<div class="col-sm-6 m-b-xs">
					<div class="input-group">
						<span class="input-group-btn">
								<span class="btn"> 上传日期 </span>
						</span>
						<input type="text" placeholder="请输入关键词" class=" form-control">
						<span class="input-group-btn">
								<span class="btn"> 到 </span>
						</span>
						<input type="text" placeholder="请输入关键词" class=" form-control">
					</div>
				</div>

				<div class="col-sm-6 m-b-xs">
					<div class="input-daterange input-group">
						<span class="input-group-btn">
								<span class="btn"> 上传日期 </span>
						</span>
						<input type="text" class=" form-control" name="upload_date_start" value="" />
						<span class="input-group-addon">到</span>
						<input type="text" class=" form-control" name="upload_date_end" value="" />
					</div>
				</div>

			</form>
		</div>

		<script>
			window.deleteUrl = '/home/Api/Api.html';
			window.setFieldUrl = '/home/Api/Api.html';
			window.detailUrl = '/home/Api/Api.html';
			window.editUrl = '/home/Api/Api.html';
		</script>


		<script src="js/jquery.min.js?v=2.1.4"></script>
		<script src="js/bootstrap.min.js?v=3.3.6"></script>
		<script src="js/content.min.js?v=1.0.0"></script>
		<script src="js/plugins/iCheck/icheck.min.js"></script>
		<script src="js/plugins/layer/layer.js"></script>
		<script src="js/plugins/datapicker/bootstrap-datepicker.js"></script>
		<script type="text/javascript" charset="utf-8" src="../static/js/form.js"></script>


		<script src="js/plugins/switchery/switchery.js"></script>
		<script src="js/plugins/datapicker/bootstrap-datepicker.js"></script>


		<script type="text/javascript" charset="utf-8" src="../static/js/custom.js"></script>
		<script type="text/javascript" charset="utf-8" src="../static/js/custom_table.js"></script>


	</body>
</html>
